<template>
	<div>
		<table class="dataTable" border="0" cellspacing="0">
			<tbody>
				<tr>
					<th>渠道等级</th>
					<th>收佣系数</th>
				</tr>
				<tr v-for="(item,index) in configArr" :key="'configArr'+index">
					<td style="color: #409eef;">{{item.level}}星</td>
					<td>
						<span v-if="!isEdit" style="color: #409eef;">{{item.commission_rate}}</span>
						<el-input-number v-if="isEdit" v-model="item.commission_rate" placeholder="请输入" :step="0.1" />
					</td>
				</tr>
			</tbody>
		</table>
		<div v-perms="['cooperation.cooperation/channelRateConfig']" style="margin-top: 20px;">
			<el-button v-if="!isEdit" type="primary" @click="isEdit=true">修改</el-button>
			<el-button v-if="isEdit" plain @click="isEdit=false">取消</el-button>
			<el-button v-if="isEdit" type="primary" @click="changeConfig">确定</el-button>
		</div>
	</div>
</template>
<script lang="ts" setup name="channelRateConfig">
	import { getChannelRateConfig, setChannelRateConfig } from '@/api/finance'
	// import { shallowRef, ref, onMounted } from 'vue'
	const configArr = ref([])
	const isEdit = ref(false)
	
	onMounted(async () => {
		getConfig();
	})
	
	const getConfig = async () => {
		try {
			const data = await getChannelRateConfig();
			configArr.value = data || [];
			isEdit.value = false;
		} catch (error) {
			console.log(error);
		}
	}
	
	const changeConfig = async () => {
		try {
			let params = configArr.value.map((item)=>{
				return {level:item.level,rate:item.commission_rate}
			})
			await setChannelRateConfig({level_rate:JSON.stringify(params)})
			getConfig()
		} catch (error) {
			getConfig()
		}
	}
</script>
<style scoped lang="scss">
	// .dataTable {
	// 	width: 60%;
	// 	line-height: 40px;
	// 	text-align: left;
	// 	border-top: 1px solid #eaeaea;
	// 	border-left: 1px solid #eaeaea;
	// 	border-right: 1px solid #eaeaea;

	// 	tr {
	// 		// display: flex;

	// 		th {
	// 			flex: 1;
	// 			min-height: 40px;
	// 			padding: 0 16px;
	// 			font-weight: 500;
	// 			font-size: 12px;
	// 			color: #fff;
	// 			// background: #f9f8f8;
	// 			border-bottom: 1px solid #eaeaea;
	// 			border-right: 1px solid #eaeaea;
	// 		}

	// 		td {
	// 			flex: 1;
	// 			min-height: 40px;
	// 			padding: 0 16px;
	// 			font-size: 12px;
	// 			color: #666;
	// 			border-bottom: 1px solid #eaeaea;
	// 			border-right: 1px solid #eaeaea;
	// 		}
	// 	}
	// }
</style>